<!-- src/views/ActivityManagementView.vue -->
<template>
  <div>
    <h2>Activity Management</h2>
    <button @click="showAddForm = true">Add New Activity</button>
    <div v-if="showAddForm">
      <h3>Add Activity</h3>
      <form @submit.prevent="addActivity">
        <input type="text" v-model="newActivity.title" placeholder="Title" required />
        <input type="text" v-model="newActivity.description" placeholder="Description" required />
        <input type="date" v-model="newActivity.date" required />
        <input type="text" v-model="newActivity.location" placeholder="Location" required />
        <button type="submit">Add</button>
        <button @click="showAddForm = false">Cancel</button>
      </form>
    </div>
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>Title</th>
          <th>Description</th>
          <th>Date</th>
          <th>Location</th>
          <th>Actions</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="activity in activities" :key="activity.id">
          <td>{{ activity.id }}</td>
          <td>{{ activity.title }}</td>
          <td>{{ activity.description }}</td>
          <td>{{ activity.date }}</td>
          <td>{{ activity.location }}</td>
          <td>
            <button @click="editActivity(activity)">Edit</button>
            <button @click="deleteActivity(activity.id)">Delete</button>
          </td>
        </tr>
      </tbody>
    </table>
    <div v-if="editingActivity">
      <h3>Edit Activity</h3>
      <form @submit.prevent="updateActivity">
        <input type="text" v-model="editingActivity.title" placeholder="Title" required />
        <input type="text" v-model="editingActivity.description" placeholder="Description" required />
        <input type="date" v-model="editingActivity.date" required />
        <input type="text" v-model="editingActivity.location" placeholder="Location" required />
        <button type="submit">Update</button>
        <button @click="cancelEdit">Cancel</button>
      </form>
    </div>
  </div>
</template>

<script>
import activities from '../data/activities.json';

export default {
  data() {
    return {
      activities: activities,
      newActivity: {
        id: null,
        title: '',
        description: '',
        date: '',
        location: ''
      },
      editingActivity: null,
      showAddForm: false
    };
  },
  methods: {
    addActivity() {
      const newId = this.activities.length > 0 ? this.activities[this.activities.length - 1].id + 1 : 1;
      this.newActivity.id = newId;
      this.activities.push({ ...this.newActivity });
      this.newActivity = {
        id: null,
        title: '',
        description: '',
        date: '',
        location: ''
      };
      this.showAddForm = false;
    },
    deleteActivity(id) {
      this.activities = this.activities.filter(activity => activity.id !== id);
    },
    editActivity(activity) {
      this.editingActivity = { ...activity };
    },
    updateActivity() {
      const index = this.activities.findIndex(activity => activity.id === this.editingActivity.id);
      if (index !== -1) {
        this.activities.splice(index, 1, { ...this.editingActivity });
      }
      this.editingActivity = null;
    },
    cancelEdit() {
      this.editingActivity = null;
    }
  }
};
</script>

<style scoped>
table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  border: 1px solid #ddd;
  padding: 8px;
}

th {
  background-color: #f2f2f2;
}

button {
  margin: 5px;
}
</style>